<template>
    <div class="project-build">
        <h2>项目建立</h2>
        <el-form ref="form" :model="form" label-width="100px" label-position="right">

            <el-form-item required label="项目名称">
                <el-input label="项目名称" v-model="form.project_name" placeholder="请输入项目名称"></el-input>
            </el-form-item>

            <el-form-item label="项目备注">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入项目备注"
                        v-model="form.remark">
                </el-input>
            </el-form-item>
            <el-form-item label="项目起始日">
                <el-date-picker
                        v-model="form.start_time"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="startDataPickerOptions">
                </el-date-picker>
            </el-form-item>

            <el-form-item v-if="form.start_time" label="项目结束日">
                <el-date-picker
                        class="mgr10"
                        v-if="form.end_time_radio"
                        v-model="form.end_time"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="endDataPickerOptions">
                </el-date-picker>
                <el-radio class="radio" v-model="form.end_time_radio" :label="0">不限</el-radio>
                <el-radio class="radio" v-model="form.end_time_radio" :label="1">指定</el-radio>
            </el-form-item>

            <el-form-item label="项目优先级">
                <el-radio class="radio" v-model="form.priority_level" :label="0">一般</el-radio>
                <el-radio class="radio" v-model="form.priority_level" :label="1">优先</el-radio>
                <el-radio class="radio" v-model="form.priority_level" :label="2">紧急</el-radio>
            </el-form-item>

            <div class="position clearfix" v-for="(item,index) in form.position" :key="index">

                <p class="position-title">岗位信息</p>
                <el-form-item label="公司名称">
                    <el-input disabled class="company" label="公司名称" v-model="item.company" placeholder="请选择公司"></el-input>
                    <el-button type="primary" @click="showCompanyList(index)">选择</el-button>
                </el-form-item>

                <!--公司列表对话框  start-->

                <el-dialog size="large" :modal-append-to-body="false" title="公司列表" v-model="companyTableVisible">
                    <!--搜索框-->
                    <el-input class="mgb10" placeholder="请输入内容" v-model="companySearchContent" >
                        <el-select class="search-type" v-model="companySearchType" slot="prepend" placeholder="请选择">
                            <el-option label="公司名" value="1"></el-option>
                            <el-option label="公司编号" value="2"></el-option>
                            <el-option label="公司简介" value="3"></el-option>
                        </el-select>
                        <el-button slot="append" icon="search"></el-button>
                    </el-input>
                    <el-table @row-click="choseCompany" border :data="companyListSearch">
                        <el-table-column property="companyId" label="公司编号" width="100"></el-table-column>
                        <el-table-column property="name" label="公司名称" width="180"></el-table-column>
                        <el-table-column property="company_introduction" label="公司简介" show-overflow-tooltip></el-table-column>
                        <el-table-column property="address" :formatter="addressFormatter" width="260" label="地址"show-overflow-tooltip></el-table-column>
                        <el-table-column property="traffic"  width="260" label="交通情况" show-overflow-tooltip></el-table-column>
                        <el-table-column label="操作" width="150">
                            <template scope="scope">
                                <el-button size="small" @click.stop="editCompany(scope.$index, scope.row)" type="warning">编辑</el-button>
                                <el-button size="small" @click.stop="deleteCompany(scope.$index, scope.row)" type="danger">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            class="tac mgt10"
                            layout="total,prev, pager, next"
                            :total="companyListSearch.length">
                    </el-pagination>
                    <el-button type="primary" class="mgt10">添加公司</el-button>
                </el-dialog>
                <!--公司列表对话框  end-->

                <el-form-item v-show="item.company" label="公司简介">
                    <p v-text="item.company_introduction"></p>
                </el-form-item>

                <el-form-item v-show="item.company" label="公司地址">
                    <p v-text="addressFormatter(item)"></p>
                </el-form-item>

                <el-form-item v-show="item.company" label="交通情况">
                    <p v-text="item.traffic"></p>
                </el-form-item>

                <el-form-item required label="岗位">
                    <el-input v-model="item.name" placeholder="请输入岗位"></el-input>
                </el-form-item>

                <el-form-item label="职位描述">
                    <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4}"
                            placeholder="请输入职位描述"
                            v-model="item.describe">
                    </el-input>
                </el-form-item>

                <el-form-item label="薪资">
                    <el-radio class="radio" v-model="item.salary.radio" label="1">区间</el-radio>
                    <el-radio class="radio" v-model="item.salary.radio" label="2">面议</el-radio>
                </el-form-item>

                <el-form-item label="薪资区间" v-show="item.salary.radio==1">
                    <el-input-number size="small" class="num-input" v-model="item.salary.min" :min="1" :max="99" ></el-input-number>
                    <span>　至　</span>
                    <el-input-number size="small" class="num-input" v-model="item.salary.max" :min="item.salary.min" :max="99"></el-input-number>
                    <span>（单位：K）</span>
                </el-form-item>
                <el-button v-if="index!=0" @click="deletePosition(index)"  type="danger" class="fr">删除岗位</el-button>
            </div>

            <el-form-item>
                <el-button type="primary">立即创建</el-button>
                <el-button @click="addPosition">添加岗位</el-button>
                <el-button>取消</el-button>
                <el-button @click="test">test</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import formAddress from '../form/newaddresss.vue'
    export default {
        methods:{
            addressFormatter({address}){
                return address.province + (address.city === address.province ? '' : address.city) + address.area + address.detail
            },
            updateAddress(index,address){
//                this.form.position[index].address = address;
                console.log(address);
            },
            showCompanyList(index){
                this.positionIndex = index;
                this.companyTableVisible = true;
            },
            choseCompany({companyId}){
                let position = this.form.position[this.positionIndex];
                this.companyList.forEach(item=>{
                    if(item.companyId === companyId){
                        position.address = Object.create(item.address);
                        position.company = item.name;
                        position.company_introduction = item.company_introduction
                        position.traffic = item.traffic
                    }
                });
                this.companyTableVisible = false
            },
            editCompany(index,row){
//                console.log(index);
//                console.log(row);
            },
            deleteCompany(index,row){

            },
            addPosition(){
                this.form.position.push({
                    company:'',
                    company_introduction:'',
                    traffic:'',
                    address:{
                        province:'',
                        city:'',
                        area:'',
                        detail:''
                    },
                    name:'',
                    describe:'',
                    salary:{
                        radio:'1',
                        min:1,
                        max:1
                    },
                })
            },
            test(){
                console.log(this.form.start_time.getTime());
                console.log(Date.now());
            },
            deletePosition(index){
                this.$confirm('确定要删除该岗位吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.form.position.splice(index,1);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        data(){
            return {
                positionIndex:0,            //当前操作岗位的索引
                companyTableVisible:false,  //公司列表显示
                //表单数据
                form:{
                    project_name:'',
                    remark:'',
                    start_time:'',
                    end_time_radio:0,
                    end_time:'',
                    priority_level:0,
                    position:[
                        {
                            company:'',
                            company_introduction:'',
                            traffic:'',
                            address:{
                                province:'',
                                city:'',
                                area:'',
                                detail:''
                            },
                            name:'',
                            describe:'',
                            salary:{
                                radio:'1',
                                min:1,
                                max:1
                            },
                        }
                    ]
                },
                //公司列表
                companyList:[
                    {
                        companyId: '432534',
                        company_introduction:"全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。",
                        date: '2016-05-02',
                        traffic:'地铁八号线，公交101',
                        name: '百度',
                        address: {
                            province:'上海市',
                            city:'上海市',
                            area:'普陀区',
                            detail:'金沙江路 1518 弄'
                        }
                    }, {
                        companyId: '143233',
                        company_introduction:'阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的18人于1999年在杭州创立，他们相信互联网能够创造公平的竞争环境，让小企业通过创新与科技扩展业务，并在参与国内或全球市场竞争时处于更有利的位置。',
                        date: '2016-05-04',
                        traffic:'地铁八号线，公交101',
                        name: '阿里巴巴',
                        address: {
                            province:'上海市',
                            city:'上海市',
                            area:'普陀区',
                            detail:'金沙江路 1518 弄'
                        }
                    }, {
                        companyId: '431323',
                        company_introduction: '腾讯网(www.QQ.com)是中国浏览量最大的中文门户网站,是腾讯公司推出的集新闻信息、互动社区、娱乐产品和基础服务为一体的大型综合门户网站。',
                        date: '2016-05-01',
                        traffic:'地铁八号线，公交101',
                        name: '腾讯',
                        address: {
                            province:'上海市',
                            city:'上海市',
                            area:'普陀区',
                            detail:'金沙江路 1518 弄'
                        }
                    }, {
                        companyId: '123534',
                        company_introduction: '京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务。',
                        date: '2016-05-03',
                        traffic:'地铁八号线，公交101',
                        name: '京东',
                        address: {
                            province:'上海市',
                            city:'上海市',
                            area:'普陀区',
                            detail:'金沙江路 1518 弄'
                        }
                    }
                ],
                companySearchContent:'',
                companySearchType:'1',
                activeCompany:{},
                startDataPickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                }
            }
        },
        computed:{
            companyListSearch(){
                let companyList = this.companyList;
                let type = this.companySearchType;
                let searchContent = this.companySearchContent;
                let newList = [];
                if(searchContent){
                    let typeName = "";
                    switch (type){
                        case "1":
                            typeName = 'name';
                            break;
                        case "2":
                            typeName = 'companyId';
                            break;
                        case "3":
                            typeName = 'company_introduction';
                    }
                    companyList.forEach(item => {
                        if(item[typeName].indexOf(searchContent) !== -1){
                            newList.push(item)
                        }
                    });
                    return newList
                }else return companyList
            },
            endDataPickerOptions(){
                let _this = this;
                return {
                    disabledDate(time) {
                        return time.getTime() < _this.form.start_time.getTime() - 8.64e7 + 3600 * 1000 * 48;
                    }
                }
            }
        },
        components: {
            formAddress
        }
    }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
    .project-build
        padding: 20px
        h2
            width: 880px
            margin: 0 auto
            text-align: center
            font 30px/80px 'microsoft yahei'
        form
            width: 800px
            padding: 20px
            margin 0 auto
            border: 1px solid #D3DCE6
            border-radius 20px
            .num-input
                vertical-align: middle
            .position
                padding: 20px 0
                border-top: 1px dashed #8492A6
                .position-title
                    font-size:18px
                    line-height: 40px
                    height: 40px
                    text-align: center
                .company
                    width: 630px
                    vertical-align: middle
                .search-type
                    width: 110px

</style>